import React from "react";
import { withRouter } from "react-router-dom";
import { Layout, Menu, Icon, Dropdown, Avatar,message } from "antd";
import { adminRoutes } from "../../routes";
import "./frame.css";
import { removeToken } from "../../utils/auth";
const { Header, Content, Sider } = Layout;

const routes = adminRoutes.filter((route) => route.isShow);

function Index(props) {
  const popMenu = (
    <Menu
      onClick={(p) => {
        if (p.key == "logout") {
          props.history.push("login");
          removeToken();
        } else {
          message.info(p.key);
        }
      }}
    >
      <Menu.Item key="notes">通知中心</Menu.Item>
      <Menu.Item key="setting">设置</Menu.Item>
      <Menu.Item key="logout">退出</Menu.Item>
    </Menu>
  );
  return (
    <div className="secon">
      <Layout>
        <Header
          className="header"
          style={{
            backgroundColor: "rgb(70, 165, 189)",
          }}
        >
          <div className="logo">
            <img
              style={{ width: "50px", height: "50px" }}
              src="http://img.tuguaishou.com/ips_templ_preview/w216_q100/3a/f7/8f/lg_2347452_1571472791_5daac597c988c.jpg?auth_key=2229609600-0-0-da7c2e6306264f8903a7e220871e16e6"
              alt="log"
            />
          </div>
          <Dropdown overlay={popMenu}>
            <div>
              <Avatar>U</Avatar>
              <span>管理员</span>
              <Icon type="down" />
            </div>
          </Dropdown>
        </Header>
        <Layout>
          <Sider width={200} style={{ background: "#fff" }}>
            <Menu
              mode="inline"
              defaultSelectedKeys={["1"]}
              defaultOpenKeys={["sub1"]}
              style={{ height: "100%", borderRight: 0 }}
            >
              {routes.map((route) => {
                return (
                  <Menu.Item
                    key={route.path}
                    onClick={(p) => props.history.push(p.key)}
                  >
                    <Icon type={route.icon} />
                    {route.title}
                  </Menu.Item>
                );
              })}
            </Menu>
          </Sider>
          <Layout style={{ padding: "16px" }}>
            {/* <Breadcrumb style={{ margin: "16px 0" }}>
              <Breadcrumb.Item>Home</Breadcrumb.Item>
              <Breadcrumb.Item>List</Breadcrumb.Item>
              <Breadcrumb.Item>App</Breadcrumb.Item>
            </Breadcrumb> */}
            <Content
              style={{
                padding: 24,
                margin: 0,
                minHeight: 280,
              }}
            >
              {props.children}
            </Content>
          </Layout>
        </Layout>
      </Layout>
      ,
    </div>
  );
}

export default withRouter(Index);
